<template>
  <div class="navigation d-flex">
    <div 
        class="navigation-item d-flex flex-1 align-items-center justify-content-center flex-direction-column"
        v-for="nav in navigations"
        :key="nav.index"
        :class="{'active': nav.index == selectedItemIndex}"
        @click="navItemClick(nav.index)"
        >
        <img :src="nav.index == selectedItemIndex ? nav.activeIcon : nav.icon" v-if="nav.type == 'img'">
        <i :class="nav.index == selectedItemIndex ? nav.activeIcon : nav.icon" v-else></i>
        <p>{{nav.value}}</p>
    </div>
  </div>
</template>

<script>

import {navigationData} from 'assets/js/data.js'

export default {
  name: "Navigation",
  data() {
    return {
      selectedItemIndex: this.$route.meta.index,
      navigations: navigationData
    };
  },
  methods: {
      navItemClick (index) {
          this.$emit("onItemClick", index);
      }
  },
  watch: {
    $route(to, from) {
      if (this.$route.meta) {
        this.selectedItemIndex = this.$route.meta.index;
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
@import '~assets/css/style.styl';

.navigation-item {
  font-size: 14px;

  img {
    width: 24px;
    height: 24px;
  }

  i {
    font-size: 20px;
  }
}

.navigation-item.active {
  color: $colorPrimary;
}
</style>
